<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th><input type="checkbox" id="a1">全选</th>
                <th>大理石</th>
                <th>大数据</th>
                <th>恢复的</th>
                <th>快速</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="box"></td>
                <td>分数</td>
                <td>分布</td>
                <td>导火索</td>
                <td>客户端</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="box"></td>
                <td>分数1</td>
                <td>分布2</td>
                <td>导火索3</td>
                <td>客户端4</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="box"></td>
                <td>分数5</td>
                <td>分布6</td>
                <td>导火索7</td>
                <td>客户端8</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="box"></td>
                <td>分数9</td>
                <td>分布10</td>
                <td>导火索11</td>
                <td>客户端12</td>
            </tr>
        </tbody>
    </table>
</body>
<script>
    window.onload = function () {
        //全选复选框

      //tbody内的复选框
        var boxObj = document.getElementsByName('box')
       //给全选框 绑定值改变事件 
        document.getElementById('a1').addEventListener('change',   function () {
             //循环普通的复选框 将普通的复选框值和全选的复选框值保持一致
            for (let i = 0; i < boxObj.length; i++) {
                boxObj[i].checked = this.checked
            }
        })
        //子复选框
      //循环所有的子复选框
        for (let i = 0; i < boxObj.length; i++) {
            //给每个子复选框 加上绑定值改变事件
            boxObj[i].addEventListener('chackge', function () {
                var flag = true //声明定义 默认为true
                 //循环每一个子复选框
                for (let j = 0; j < boxObj.length; j++) {
                    //判断 只要有一个为 没选中 false
                    if(!boxObj[j].checked) {
                        flag = false
                    }
                }
                //最后把值给到 全选框
                document.getElementById('a1').checked = flag
            })
        }
    }
</script>
</html>